<template>
  <div>
    <el-card>
      <t-head
        @search="searchHandle"
        @add="open"
        addName="类型"
        searchPlace="类型名称"
      >
        <!-- <template slot="select">
          <el-col :span="3">
            <el-input placeholder="输入111" style="margin-right: 10px" />
          </el-col>
        </template> -->
      </t-head>
      <el-table :data="datalist" border style="width: 100%; margin-top: 20px">
        <el-table-column label="id" prop="id" sortable></el-table-column>
        <el-table-column label="分类名称" prop="name"></el-table-column>
        <el-table-column label="分类图标">
          <template slot-scope="scope">
            <img
              :src="scope.row.img"
              v-if="scope.row.img"
              alt="头像"
              class="headicon"
            />
            <span v-else> - </span>
          </template>
        </el-table-column>
        <el-table-column
          label="排序权重"
          prop="sort"
          sortable
        ></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isshow"
              active-text="使用"
              inactive-text="禁用"
              active-value="1"
              inactive-value="0"
              @change="handleDelete(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="editHandle(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="delHandle(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="pagination.total"
        @current-change="currentHandle"
      >
      </el-pagination>
      <Dialog ref="form" :userdata="itemModel" @change="add"/>
    </el-card>
  </div>
</template>
<script>
import THead from "@/components/Thead.vue";
import Dialog from "./components/dialog.vue";
import { get,add } from "@/util/model/type";
import pagination from "@/mixins/pagination";
import thead from "@/mixins/thead";
import http from "@/mixins/http"
export default {
  name: "typeDialog",
  components: {
    Dialog,
    THead,
  },
  mixins: [pagination, thead,http],
  data() {
    return {
      datalist: [],
      itemModel: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    currentHandle(index){
      this.setPage(index).getData()
    },
    open() {
      this.$refs.form.open();
    },
    async add(e={}) {
      if(!e) return this.itemModel = {}
      this.itemModel=e
      const res = await add(e)
      this.checkCode(res).success(this.getData())
      this.itemModel = {};
      return this
    },
    delHandle() {},
    editHandle(index, row) {
      this.itemModel = row
      this.open()
    },
    async getData() {
      const res = await get({
        ...this.getSearch(),
        ...this.getPagination(),
      });
      this.datalist = res.data;
      this.setTotal(res.total);
    },
  },
};
</script>
<style>
</style>